{extend name="./app/admin/view/main.html" /}
{block name="title"}全部文章 - {__block__}{/block}

{block name="style"}
<style>
</style>
{/block}

{block name="main"}
<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">文章</h4> <h5 class="sub-title">全部文章</h5>
    </div>
    <div class="float-right">
        <a target="_blank" :href="'{$mipInfo.domain}/{$Think.config.admin}/article/articlePublish/cid-'+cid" class="ivu-btn ivu-btn-primary ivu-btn-circle">
            <Icon type="md-add"></Icon>
            发布文章
        </a>
    </div>
</header>

<main class="mipcms-container-body" style="height: calc(100% - 50px)">

    <aside class="side-box box2 mip-box" style="height: calc(100% - 50px - 92px);bottom: 15px;">
        <section class="side-box-body">
            <tree :data="catetree" @on-select-change="on_select_tree_node"></tree>
        </section>
    </aside>

    <section class="content-box box2">
        <section class="mip-box">
            <section class="mip-box-body">
                <!--内容列表-->
                <section class="diy-table-list" v-cloak>
                    <div class="content-list-header clearfix">
                        <div class="float-left m-b-xs">
                            <i-input v-model="searchWord" placeholder="请输入搜索的关键词" style='width: 300px;'>
                                <i-Button slot="append" icon="ios-search" @click='clk_search'></i-Button>
                            </i-input>
                        </div>
                        <div class="float-right">
                            <button class="ivu-btn ivu-btn-text" type="text" :disabled='!articleListSelectStatus'
                                    @click="onClickArticlesDel">
                                <Icon type="md-trash"></Icon>
                                批量删除
                            </button>

                            <span>
                                <i-button type="text" :disabled='!articleListSelectStatus'
                                          @click="mipPush('mip')"><Icon type="md-cloud-upload"></Icon> MIP推送</i-button>
                                <i-button type="text" :disabled='!articleListSelectStatus'
                                          @click="mipPush('guanfanghaoNew')"><Icon
                                        type="md-paw"></Icon> 熊掌号新增推送</i-button>
                                <i-button type="text" :disabled='!articleListSelectStatus'
                                          @click="mipPush('guanfanghaoOld')"><Icon type="ios-paw-outline"></Icon>  熊掌号历史推送</i-button>
                                <i-button type="text" :disabled='!articleListSelectStatus'
                                          @click="mipPush('baiduYuanChuangUrl')"><i
                                        class="ivu-icon ivu-icon-ios-paper-outline"></i> 百度原创推送</i-button>
                                <i-button type="text" :disabled='!articleListSelectStatus'
                                          @click="mipPush('link')"> <Icon
                                        type="ios-paper-plane"></Icon> 百度链接推送</i-button>
                            </span>
                        </div>

                    </div>
                    <table class="table table-hover diy-table-list">
                        <thead>
                        <tr class="diy-table-item-header">
                            <th style="width:60px">
                                <Checkbox v-model="articleListSelectStatus" :disabled='!articleList.length' @on-change='articleListSelectAll'>全选</Checkbox>
                            </th>
                            <th style="width: 280px;"><span>分类</span></th>
                            <th><span>标题</span></th>
                            <th style="width:160px;"><span>发布时间</span></th>
                            <th style="width:80px;"><span>排序</span></th>
                            <th style="width:60px"><span>浏览</span></th>
                            <th style="width:60px"><span>状态</span></th>
                            <th style="width:100px;text-align: center;"><span>操作</span></th>

                        </tr>
                        </thead>

                        <tbody class="diy-table-body">
                        <template v-if='articleList.length>0' v-for='(item,index) in articleList'>
                            <tr class="tr1 diy-table-item">
                                <td>
                                    <Checkbox v-model="item.selectedStatus"></Checkbox>
                                </td>
                                <td><span v-if='item.categoryInfo'>
                                    <a :href="item.categoryInfo.url"
                                       target="_blank">{{item.categoryInfo.title}}</a></span>
                                    <span v-else>无分类</span></td>
                                <td><span><a :href="item.url"
                                             target="_blank">{{item.title}}</a></span></td>
                                <td>
                                    <span :style="item.ts_publish_time > new Date().getTime()/1000?{color: '#FF4949'}:{}">{{item.ts_publish_time | time }}</span>
                                </td>
                                <td>
                                    <i-Button size="small" @click='moveUp(item)' :disabled='index==0'>
                                        <Icon type="md-arrow-round-up" />
                                    </i-Button>
                                    <i-Button size="small" @click='moveDown(item)' :disabled='articleList.length==index+1'>
                                        <Icon type="md-arrow-round-down" />
                                    </i-Button>
                                </td>
                                <td><span>{{item.views}}</span></td>
                                <td><span :class="{'txt-disabled':item.status==0,'txt-draft':item.status==2}">{{item.str_status}}</span></td>
                                <td>

                                    <Button-Group size="small" shape="circle">
                                        <i-button type="success"><a style="color: #fff;" target="_blank" :href="'{$mipInfo.domain}/{$Think.config.admin}/article/articlePublish/id-' + item.id + '__cid-' + item.cid"> 编辑</a></i-button>
                                        <i-button type="warning" @click="onClickArticleDel(item)">删除</i-button>
                                    </Button-Group>
                                </td>

                            </tr>
                        </template>
                        <template v-if="articleList.length==0">
                            <tr>
                                <td colspan="9" class="no-block">
                                    <Icon type="ios-filing-outline"></Icon>
                                    <p>暂无数据</p>
                                </td>
                            </tr>
                        </template>

                        </tbody>

                    </table>
                </section>
                <!--内容列表结束-->
                <!--分页-->
                <div class="text-right clearfix mt-3">
                    <div class="diy-table-item float-left" style="margin-left: 10px;">
                        <Checkbox v-model="articleListSelectStatus" :disabled='!articleList.length'
                                  @on-change='articleListSelectAll'>全选
                        </Checkbox>
                        <button class="ivu-btn ivu-btn-text" type="text" :disabled='!articleListSelectStatus'
                                @click="transferClick">
                            <Icon type="arrow-swap"></Icon>
                            批量转移
                        </button>
                    </div>
                    <Page :total="pagination.total" @on-page-size-change='articlePaginationSelect'
                          :page-size-opts='[10,100,500,1000,5000]' show-total show-sizer placement='top'
                          @on-change='articlePaginationClick'></Page>
                </div>
            </section>
        </section>
    </section>
</main>
<!--推送-->
<Modal title="推送" v-model="push.pushStatus" v-cloak>
    <template>
        <p>以下是本次提交的地址共{{push.pushData.length}}篇</p>
        <ul class="list-unstyled">
            <li class="text-999 font-12" style="line-height: 26px;" v-for='item in push.pushData'>{{item}}</li>
        </ul>
        <p class="m-t">百度站长平台提交的API接口：</p>
        <pre class="selected m-t-n-xs">{{push.pushAddress}}</pre>
    </template>
    <span slot="footer" class="dialog-footer">
            <i-button @click="push.pushStatus = false">取 消</i-button>
            <i-button type="primary" @click='pushPost'>确 定</i-button>
          </span>
</Modal>

<!--转移-->
<Modal title="批量转移" v-model="transferStatus" v-cloak>
    <i-form :label-width="80">
        <Form-Item label="提示">
            <span>请选择您需要转移到的目标分类</span>
        </Form-Item>
        <Form-Item label="目标分类">
            <Cascader :data="transferList" v-model="transferId"></Cascader>
        </Form-Item>
    </i-form>
    <span slot="footer" class="dialog-footer">
            <i-button @click="transferStatus = false">取 消</i-button>
            <i-button type="primary" @click='transferSubmit'>确 定</i-button>
          </span>
</Modal>
{/block}

{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            articleListSelectStatus: false,
            searchWord: '',
            cid: 0,
            categoryList: [],
            catetree: [],
            curr_cateid: 0,

            articleList: [],
            status: '',
            statusText: '全部',
            //转移
            transferStatus: false,
            transferId: [],
            transferList: [],
            //推送
            push: {
                pushStatus: false,
                pushData: [],
                pushType: '',
                pushAddress: ''
            },
            pagination: {
                currentPage: 1,
                limit: 10,
                total: this.total,
            },
        },
        watch: {
            articleList: {
                handler(newValue, oldValue) {

                    for (var i = 0; i < this.articleList.length; i++) {
                        if (this.articleList[i].selectedStatus == true) {
                            this.articleListSelectStatus = true;
                            return;
                        }
                    }
                    this.articleListSelectStatus = false;
                },
                deep: true
            }
        },
        mounted() {
            this.getListHasChild();
            this.getCategoryTree();

        },
        methods: {
            //转移
            transferClick() {
                this.transferStatus = true;
                this.transferId = [];
            },
            transferSubmit() {
                var itemIds = [];
                for (var i = 0; i < this.articleList.length; i++) {
                    if (this.articleList[i].selectedStatus) {
                        itemIds.push(this.articleList[i].id);
                    }
                }
                itemIds = itemIds.join(',');
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticle/do_transfer_all', {
                    cid: this.transferId[this.transferId.length - 1],
                    ids: itemIds,
                }).then(res => {
                    if (res.code == 1) {
                        this.$Message.success('操作成功');
                        this.getItemList();
                        this.transferStatus = false;
                    }
                });
            },
            getCategoryTree: function(){
                let _this = this;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/get_full_tree', {}).then(res => {
                    let t1 = res.data;
                    if(t1) {
                        for (let i = 0; i < t1.length; i++) {
                            t1[i].expand = true;
                        }
                    }
                    let t2 = [{'title':'分类树','id':0 , expand:true,children: t1 }]
                    _this.catetree = t2 ;
                } );
            },
            //获取选择的URL数据
            getUrl() {
                var itemUrlList = [];
                for (var i = 0; i < this.articleList.length; i++) {
                    if (this.articleList[i].selectedStatus) {
                        itemUrlList.push(this.articleList[i].url);
                    }
                }
                return itemUrlList;
            },
            //mip推送
            mipPush(type) {
                this.push.pushType = type;
                this.push.pushData = this.getUrl();
                if (this.push.pushType == 'guanfanghaoNew') {
                    this.push.pushAddress = this.siteInfo.guanfanghaoRealtimeUrl;
                }
                if (this.push.pushType == 'baiduYuanChuangUrl') {
                    this.push.pushAddress = this.siteInfo.baiduYuanChuangUrl;
                }
                if (this.push.pushType == 'mip') {
                    this.push.pushAddress = this.siteInfo.mipApiAddress;
                }
                if (this.push.pushType == 'guanfanghaoOld') {
                    this.push.pushAddress = this.siteInfo.guanfanghaoUrl;
                }
                if (this.push.pushType == 'link') {
                    this.push.pushAddress = this.siteInfo.baiduTimePcUrl;
                }
                this.push.pushStatus = true;
            },
            pushPost() {
                if (!this.push.pushData.length) {
                    this.$Message.error('请选择要推送的内容链接');
                    return false;
                }
                if (!this.push.pushType) {
                    this.$Message.error('系统无法识别你推送的类型');
                    return false;
                }
                if (!this.push.pushAddress) {
                    this.$Message.error('请去完善你要推送的API接口地址');
                    return false;
                }
                var _this = this;
                this.$mip.ajax('{$mipInfo.domain}/{$Think.config.admin}/ApiAdminMipPost/urlPost', {
                    urls: this.push.pushData.join(','),
                    postAddress: this.push.pushAddress,
                }).then(function (res) {
                    if (res.code == 1) {
                        var resMIp = JSON.parse(res.msg);
                        if (_this.push.pushType == 'guanfanghaoNew') {
                            _this.$Message.success('推送成功：' + resMIp.success_realtime + '条；剩余:' + resMIp.remain_realtime + '条');
                        }
                        if (_this.push.pushType == 'baiduYuanChuangUrl') {
                            _this.$Message.success('推送成功：' + resMIp.success_original + '条；剩余:' + resMIp.remain_original + '条');
                        }
                        if (_this.push.pushType == 'mip') {
                            _this.$Message.success('推送成功：' + resMIp.success_mip + '条；剩余:' + resMIp.remain_mip + '条');
                        }
                        if (_this.push.pushType == 'guanfanghaoOld') {
                            _this.$Message.success('推送成功：' + resMIp.success_batch + '条；剩余:' + resMIp.remain_batch + '条');
                        }
                        if (_this.push.pushType == 'link') {
                            _this.$Message.success('推送成功：' + resMIp.success + '条');
                        }
                        _this.push.pushStatus = false;
                    }
                });
            },
            onClickArticleEdit(item) {
                window.location.href = '{$mipInfo.domain}/{$Think.config.admin}/article/articlePublish/id-' + item.id + '__cid-' + item.cid;
            },
            onClickArticleDel(val) {
                var _this = this;
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        _this = this;
                        this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticle/do_del', {
                            id: val.id,
                        }).then(function (res) {
                            if (res.code == 1) {
                                _this.$Message.success('操作成功');
                                _this.getItemList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            onClickArticlesDel() {
                var _this = this;
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        var itemIds = [];
                        for (var i = 0; i < this.articleList.length; i++) {
                            if (this.articleList[i].selectedStatus) {
                                itemIds.push(this.articleList[i].id);
                            }
                        }
                        itemIds = itemIds.join(',');
                        this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticle/do_dels', {
                            ids: itemIds,
                        }).then(function (res) {
                            if (res.code == 1) {
                                _this.$Message.success(res.msg);
                            }
                            _this.getItemList();
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            //选择全部
            articleListSelectAll() {
                for (var i = 0; i < this.articleList.length; i++) {
                    if (this.articleListSelectStatus) {
                        this.articleList[i].selectedStatus = true;
                    } else {
                        this.articleList[i].selectedStatus = false;
                    }
                }
            },
            pushStautsClick(val) {
                this.status = val;
                if (val === '') {
                    this.statusText = '全部';
                }
                if (parseInt(val) == 0) {
                    this.statusText = '未推送';
                }
                if (parseInt(val) == 1) {
                    this.statusText = '已推送';
                }
                this.getItemList();
            },
            getListHasChild() {
                this.loading = true;
                var _this = this;

                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticle/get_list_has_child', {
                    status: this.status,
                    page: this.pagination.currentPage,
                    limit: this.pagination.limit,
                    searchWord: this.searchWord,
                    cid: this.curr_cateid,
                }).then(function (res) {
                    _this.articleList = [];
                    if (res.code == 1) {
                        var articleList = res.data.list;
                        if (articleList) {
                            for (var i = 0; i < articleList.length; i++) {
                                articleList[i].selectedStatus = false;
                            }
                            _this.articleList = articleList;
                        }
                        _this.pagination.total = res.data.total;
                    }

                    _this.loading = false;
                });
            },
            articlePaginationSelect(val) {
                this.pagination.limit = val;
                this.getListHasChild();
            },
            articlePaginationClick(val) {
                this.pagination.currentPage = val;
                this.getListHasChild();
            },
            //搜索
            clk_search: function () {
                this.getListHasChild();
            },
            moveUp: function(item){
                let _this = this;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticle/do_move_up', {
                    id: item.id,
                }).then(function (res) {
                    if(res.code==1){
                        _this.getList();
                    }
                });
            },
            moveDown: function(item){
                let _this = this;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticle/do_move_down', {
                    id: item.id,
                }).then(function (res) {
                    if(res.code==1){
                        _this.getListHasChild();
                    }
                });
            },
            on_select_tree_node:function(arg1,arg2){
                this.curr_cateid = arg2.id;
                this.getListHasChild();
            },
        }
    })
</script>
{/block}